<template>
    <div style="width:40%;border: 1px solid #ededed;float: right;margin-top: 30px;padding: 20px;">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="月度统计" name="1">
                <el-date-picker v-model="month" type="month" placeholder="选择月" :clearable="false" value-format="yyyy-MM"
                    @change="changeMonth">
                </el-date-picker>
            </el-tab-pane>
            <el-tab-pane label="年度统计" name="2">
                <el-date-picker v-model="year" type="year" value-format="yyyy" :clearable="false" placeholder="选择年"
                    @change="changeYear"></el-date-picker>
            </el-tab-pane>
        </el-tabs>

        <div style="width:100%;height:300px" id="pie"></div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
import { selectProjectCostStatistics } from "../../../../service/financeApi";

export default {
    data() {
        return {
            myChart4: null,
            pieDataList: [],
            period: "",
            pieDataName: [],
            pieDataValue: [],
            pieData: [],
            activeName: '1',
            year: '',
            month: ''
        };
    },
    created() {
        // let date = new Date();
        // this.year = date.getFullYear() + "";
        this.getdatetime();
    },
    methods: {
        getMonthData() {
            let data = {
                period: this.month
            }
            selectProjectCostStatistics(data).then(res => {
                if (res.code == 0) {
                    this.pieData = res.data
                    this.pieData.forEach((item) => {
                        this.pieDataList.push({
                            name: item.name + item.data + "元",
                            value: item.data
                        })
                    })
                    console.log("this.pieData", this.pieData);
                    console.log("pieDataList遍历后", this.pieDataList);
                    let changeData = JSON.parse(JSON.stringify(this.pieDataList))
                    console.log("changeData", changeData);
                    this.drawPie1(changeData);
                }
            });
        },
        getYearData() {
            let data = {
                period: this.year
            }
            selectProjectCostStatistics(data).then(res => {
                if (res.code == 0) {
                    this.pieData = res.data
                    this.pieData.forEach((item) => {
                        this.pieDataList.push({
                            name: item.name + item.data + "元",
                            value: item.data
                        })
                    })
                    console.log("this.pieData", this.pieData);
                    console.log("pieDataList遍历后", this.pieDataList);
                    let changeData = JSON.parse(JSON.stringify(this.pieDataList))
                    console.log("changeData", changeData);
                    this.drawPie1(changeData);
                }
            });
        },
        drawPie1(changeData) {
            var myChart4 = echarts.init(document.getElementById("pie"));
            console.log(document.getElementById('pie'))
            myChart4.setOption({
                // 颜色不会设计~
                // color: [
                //   "#00B98D",
                //   "#29CC6A",
                //   "#88DB50",
                //   "#C5E02E",
                //   "#3F9DFF",
                //   "#FBC6C6",
                //   "#F6E1A7"
                // ],
                color: [
                    "rgba(250, 183, 15, 1)",
                    "rgba(2, 173, 130, 1)",
                    "rgba(252, 139, 45, 1)",
                    "rgba(25, 98, 224, 1)"
                ],
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['管理类', '自研产品', '委托开发', '市场'],
                },
                series: {
                    name: "项目类型支出占比",
                    type: "pie",
                    radius: ['40%', '70%'],
                    // center: ["50%", "50%"],
                    avoidLabelOverlap: true,
                    // roseType: "radius",
                    // 图形的文字标签
                    label: {
                        fontSize: 10,
                        position: 'center'
                    },
                    // 链接图形和文字的线条
                    labelLine: {
                        // length 链接图形的线条
                        length: 2,
                        // length2 链接文字的线条
                        length2: 2
                    },
                    data: changeData
                }

                // legend: {
                //     orient: 'vertical',
                //     x: 'left',
                //     data: ['管理类', '自研产品', '委托开发', '市场'],
                // },
                // series: [
                //     {
                //         type: 'pie',
                //         radius: ['50%', '70%'],
                //         avoidLabelOverlap: false,
                //         label: {
                //             show: false,
                //             position: 'center'
                //         },
                //         labelLine: {
                //             show: false
                //         },
                //         emphasis: {
                //             label: {
                //                 show: true,
                //                 fontSize: '30',
                //                 fontWeight: 'bold'
                //             }
                //         },
                //         data: changeData
                //     }
                // ]

            });
            window.addEventListener("resize", function () {
                myChart4.resize();
            });
        },
        getdatetime() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            month = month < 10 ? '0' + month : month
            this.month = year + '-' + month;
        },
        changeMonth() {
            this.pieDataList = []
            this.getMonthData();
        },
        changeYear() {
            this.pieDataList = []
            this.getYearData();
        },
        handleClick() {
            let date = new Date();
            this.year = date.getFullYear() + "";
            this.pieDataList = []
            if (this.activeName == 2) {
                this.getYearData();
            } else if (this.activeName == 1) {
                this.getMonthData();
            }

        }
    },
    mounted() {
        this.getMonthData();
    },
};
</script>
  
<style lang="scss" scoped></style>
  